<template>
  <div class="full-screen-height full-screen-width ofy-auto ofx-hidden">
    <div style="background: #732afd;color: white;"
         class="position-relative height-12 text-white text-32 d-flex align-items-center justify-content-center">
      胸痛中心质控管理平台
      <img class="logo-xiongtong" width="110" height="110" src="/static/assets/img/xiongtong.png" alt="">
      <div class="imgs-container">
        <img class="mr-5" width="auto" height="85" src="/static/assets/img/indicators/1.png" alt="">
        <img class="mr-5" width="auto" height="85" src="/static/assets/img/indicators/2.png" alt="">
        <img width="auto" height="85" src="/static/assets/img/indicators/3.png" alt="">
      </div>
    </div>
    <div class="mt-15">
      <div class="text-26 text-center">质控指标查询</div>
      <div class="mt-20 mx-auto" style="width:80%">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="d-flex justify-content-start align-items-center">
              <div class="text-16 mr-5">
                <img class="position-relative" style="top: -12px" width="18" height="18" src="/static/assets/img/indicators/location.png" alt="">
                地区：
              </div>
              <div class="flex-full d-flex justify-content-around">
                <el-select v-model="province" class="border-bottom border-gray mr-15 all-black">
                  <el-option label="江苏省" value="1"></el-option>
                </el-select>
                <el-select v-model="city" class="border-bottom border-gray mr-15 all-black">
                  <el-option label="苏州市" value="1"></el-option>
                </el-select>
                <el-select v-model="hospital" class="border-bottom border-gray all-black">
                  <el-option label="苏州大学附属第一医院" value="1"></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="d-flex justify-content-center">
              <div class="d-flex align-items-center mr-20">
                <div class="text-16 mr-5">
                  <img class="position-relative" style="top: -12px" width="18" height="18" src="/static/assets/img/indicators/time.png" alt="">
                  时间：
                </div>
                <div class="d-flex align-items-center border-bottom border-gray">
                  <span class="text-16">{{startTime?startTime:'请选择'}}</span>
                  <div class="">
                    <el-date-picker
                      class="width-4 cursor-pointer"
                      v-model="startTime"
                      type="month"
                      :clearable="false"
                      value-format="yyyy年M月"
                      prefix-icon="el-icon-arrow-down">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-center">
                <div class="text-16 mr-10">至</div>
                <div class="d-flex align-items-center border-bottom border-gray">
                  <span class="text-16">{{endTime?endTime:'请选择'}}</span>
                  <div class="">
                    <el-date-picker
                      class="width-4 cursor-pointer"
                      v-model="endTime"
                      type="month"
                      :clearable="false"
                      value-format="yyyy年M月"
                      prefix-icon="el-icon-arrow-down">
                    </el-date-picker>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="mt-10 d-flex justify-content-end mr-30">
          <el-button style="background: #8bc34a;color: white" class="text-16" round>确 定</el-button>
        </div>
        <div class="mt-15">
          <div class="d-flex align-items-center">
            <span style="color: #461010" class="text-20 mr-15">建设进度：</span>
            <span style="color: #333333;" class="text-16">通过认证</span>
          </div>
          <div class="mt-5 d-flex align-items-center">
            <span style="color: #461010" class="text-20 mr-15">认证类型：</span>
            <span style="color: #333333;" class="text-16">标准版</span>
            <span style="color: #333333;" class="text-16">（全国共</span>
            <span style="color: #732afd;" class="text-16 mx-2">328</span>
            <span style="color: #333333;" class="text-16">家；本省共</span>
            <span style="color: #732afd;" class="text-16 mx-2">48</span>
            <span style="color: #333333;" class="text-16">家）</span>
          </div>
        </div>
        <div class="mt-15">
          <el-row>
            <el-col v-for="(item,i) in chartData" :key="i" :span="12">
              <div class="d-flex justify-content-center mb-30">
                <div class="text-center full-width">
                  <div class="text-17 font-weight-bold" style="color: #212121;">
                    {{item.title}}
                  </div>
                  <div class="mt-10">
                    <div style="width: 90%" class="height-30 mx-auto">
                      <chart :options="item.data" ref="chart" :auto-resize="true" class="full-width full-height"></chart>
                    </div>
                  </div>
                  <div class="mt-10 d-flex justify-content-around">
                    <div class="text-17">
                      <span style="color: #461010">全国排名：</span>
                      <span style="color: #732afd;">{{item.nationalRank}}</span>
                    </div>
                    <div class="text-17">
                      <span style="color: #461010">省排名：</span>
                      <span style="color: #732afd;">{{item.provinceRank}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'

export default {
  name: 'indicators',
  data () {
    return {
      startTime: '',
      endTime: '',
      province: '',
      city: '',
      hospital: '',
      chartData: [
        {
          title: '1.STEMI患者症状到厚此医疗接触（S2FMC）时间',
          nationalRank: 32,
          provinceRank: 3,
          data: {
            legend: {
              type: 'plain',
              orient: 'horizontal',
              bottom: 10,
              data: ['平均值', '参考标准', '符合率']
            },
            grid: {
              bottom: 70
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisTick: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisLabel: {
                color: 'rgba(128, 128, 128, 1)',
                fontSize: 12,
                interval: 0
              },
              data: ['2017.01', '2017.03', '2017.05', '2017.07', '2017.09', '2017.11', '2018.01', '2018.03', '2018.05', '2018.07', '2018.09', '2018.11']
            },
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 200,
                splitNumber: 10,
                name: '分钟',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              },
              {
                type: 'value',
                min: 0,
                max: 100,
                splitNumber: 10,
                name: '百分比',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              }
            ],
            series: [
              {
                name: '符合率',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 70, 90, 10, 80, 66, 70, 80, 40, 99, 80, 10],
                symbol: 'circle',
                itemStyle: {
                  color: '#376091'
                }
              },
              {
                name: '参考标准',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                symbol: 'none',
                symbolSize: 0
              },
              {
                name: '平均值',
                data: [120, 200, 150, 80, 70, 110, 130, 90, 100, 105, 170, 150],
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#cbc0da'
                    },
                    {
                      offset: 0.25,
                      color: '#b5a5c9'
                    },
                    {
                      offset: 0.66,
                      color: '#b2a1c6'
                    },
                    {
                      offset: 1,
                      color: '#6c5786'
                    }
                  ])
                }
              }
            ]
          }
        },
        {
          title: '1.STEMI患者症状到厚此医疗接触（S2FMC）时间',
          nationalRank: 32,
          provinceRank: 3,
          data: {
            legend: {
              type: 'plain',
              orient: 'horizontal',
              bottom: 10,
              data: ['平均值', '参考标准', '符合率']
            },
            grid: {
              bottom: 70
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisTick: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisLabel: {
                color: 'rgba(128, 128, 128, 1)',
                fontSize: 12,
                interval: 0
              },
              data: ['2017.01', '2017.03', '2017.05', '2017.07', '2017.09', '2017.11', '2018.01', '2018.03', '2018.05', '2018.07', '2018.09', '2018.11']
            },
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 200,
                splitNumber: 10,
                name: '分钟',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              },
              {
                type: 'value',
                min: 0,
                max: 100,
                splitNumber: 10,
                name: '百分比',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              }
            ],
            series: [
              {
                name: '符合率',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 70, 90, 10, 80, 66, 70, 80, 40, 99, 80, 10],
                symbol: 'circle',
                itemStyle: {
                  color: '#376091'
                }
              },
              {
                name: '参考标准',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                symbol: 'none',
                symbolSize: 0
              },
              {
                name: '平均值',
                data: [120, 200, 150, 80, 70, 110, 130, 90, 100, 105, 170, 150],
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#cbc0da'
                    },
                    {
                      offset: 0.25,
                      color: '#b5a5c9'
                    },
                    {
                      offset: 0.66,
                      color: '#b2a1c6'
                    },
                    {
                      offset: 1,
                      color: '#6c5786'
                    }
                  ])
                }
              }
            ]
          }
        },
        {
          title: '1.STEMI患者症状到厚此医疗接触（S2FMC）时间',
          nationalRank: 32,
          provinceRank: 3,
          data: {
            legend: {
              type: 'plain',
              orient: 'horizontal',
              bottom: 10,
              data: ['平均值', '参考标准', '符合率']
            },
            grid: {
              bottom: 70
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisTick: {
                lineStyle: {
                  color: 'transparent'
                }
              },
              axisLabel: {
                color: 'rgba(128, 128, 128, 1)',
                fontSize: 12,
                interval: 0
              },
              data: ['2017.01', '2017.03', '2017.05', '2017.07', '2017.09', '2017.11', '2018.01', '2018.03', '2018.05', '2018.07', '2018.09', '2018.11']
            },
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 200,
                splitNumber: 10,
                name: '分钟',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              },
              {
                type: 'value',
                min: 0,
                max: 100,
                splitNumber: 10,
                name: '百分比',
                nameTextStyle: {
                  color: '#333',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisTick: {
                  alignWithLabel: true,
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(242, 242, 242, 1)'
                  }
                },
                axisLabel: {
                  color: '#333',
                  fontSize: 12
                }
              }
            ],
            series: [
              {
                name: '符合率',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 70, 90, 10, 80, 66, 70, 80, 40, 99, 80, 10],
                symbol: 'circle',
                itemStyle: {
                  color: '#376091'
                }
              },
              {
                name: '参考标准',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                symbol: 'none',
                symbolSize: 0
              },
              {
                name: '平均值',
                data: [120, 200, 150, 80, 70, 110, 130, 90, 100, 105, 170, 150],
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#cbc0da'
                    },
                    {
                      offset: 0.25,
                      color: '#b5a5c9'
                    },
                    {
                      offset: 0.66,
                      color: '#b2a1c6'
                    },
                    {
                      offset: 1,
                      color: '#6c5786'
                    }
                  ])
                }
              }
            ]
          }
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
  .text-underline {
    text-decoration: underline;
  }
  .el-input__inner{
    font-size: 28px !important;
  }
  .logo-xiongtong{
    position: absolute;
    right: 90px;
    top: 30px;
  }
  .imgs-container{
    position: absolute;
    left: 90px;
  }
</style>
